<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline">
          <el-form-item>
            <el-input size="mini" v-model="formInline.name" placeholder="请输入基地名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="mini" v-model="formInline.userName" placeholder="请输入负责人"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select clearable size="mini" v-model="formInline.status" placeholder="请选择状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="buttonList">
      <el-col>
        <el-button type="primary" size="mini" @click="newAdd">新增</el-button>
        <el-button :disabled="btnDisabled" type="primary" size="mini" @click="edit('edit')">编辑</el-button>
        <el-button :disabled="btnDisabled" type="primary" size="mini" @click="edit('view')">查看</el-button>
        <el-button type="danger" size="mini">启/禁用</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          border
          size="mini"
          style="width: 100%">
          <el-table-column
                  align="center"
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column
            align="center"
            prop="NAME"
            width="170px"
            label="基地名称">
          </el-table-column>
          <el-table-column
            align="center"
            width="90px"
            prop="DEPARTMENTNAME"
            label="所属院系">
          </el-table-column>
          <el-table-column
            align="center"
            prop="MAJORNAME"
            width="160px"
            label="主要专业">
          </el-table-column>
          <el-table-column
            align="center"
            prop="PORJECTNAME"
            label="项目名称">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="RATIFYTIME"
                  width="120px"
                  label="批准日期">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="SUPPORTDEPARTMENT"
                  label="支持部门">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="USERNAME"
                  label="负责人">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="PHONE"
                  width="165px"
                  label="联系电话">
          </el-table-column>
          <el-table-column
            align="center"
            prop="STATUS"
            label="状态">
            <template slot-scope="scope">
              {{scope.row.STATUS ? '启用' : '禁用'}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="CREATEUSERNAME"
            label="创建人">
          </el-table-column>
          <el-table-column
            align="center"
            prop="CREATETIME"
            width="150px"
            label="创建时间">
            <template slot-scope="scope">
              {{new Date(scope.row.CREATETIME).toLocaleString()}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 30, 50, 100]"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="基地信息" :visible.sync="dialogFormVisible" center width="50%">
      <el-form :model="form" ref="form" :rules="rules" :label-width="formLabelWidth">
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属院系" prop="departmentId">
              <el-select clearable :disabled="nptDisabled" @change="departChange" v-model="form.departmentId" placeholder="请选择院系" size="mini">
                <el-option :label="item.NAME" v-for="item in departmentList" :value="item.ID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主要专业" prop="majorId">
              <el-select multiple clearable :disabled="nptDisabled" v-model="form.majorId" placeholder="请选择专业" size="mini">
                <el-option :label="item.NAME" v-for="item in majorList" :value="item.ID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="基地名称" prop="name">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.projectName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="批准日期" class="dateStyle" prop="ratifyTime">
              <el-date-picker :disabled="nptDisabled" value-format="yyyy-MM-dd" size="mini" type="date" placeholder="请选择日期" v-model="form.ratifyTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支持部门" prop="supportDepartment">
              <el-select clearable :disabled="nptDisabled" v-model="form.supportDepartment" placeholder="请选择支持部门" size="mini">
                <el-option label="国家级" value="国家级"></el-option>
                <el-option label="省部级" value="省部级"></el-option>
                <el-option label="企业级" value="企业级"></el-option>
                <el-option label="院校级" value="院校级"></el-option>
                <el-option label="其它" value="其它"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人" prop="userName">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.userName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "trainBase",
    data() {
      return{
        pagination: {
          pageSize: 10,
          total: 1,
          pageNo: 1
        },
        form: {
          departmentId: '',
          majorId: [],
          name: '',
          projectName: '',
          ratifyTime: '',
          supportDepartment: '',
          userName: '',
          phone: ''
        },
        rules: {
          departmentId: [
            { required: true, message: '请选择院系', trigger: 'change' },
          ],
          majorId: [
            { required: false, message: '请选择专业', trigger: 'change' },
          ],
          name: [
            { required: true, message: '请输入基地名称', trigger: 'blur' },
          ],
          projectName: [
            { required: true, message: '请输入项目名称', trigger: 'blur' },
          ],
          ratifyTime: [
            { required: true, message: '请选择批准日期', trigger: 'change' },
          ],
          supportDepartment: [
            { required: true, message: '请选择支持部门', trigger: 'change' },
          ],
          userName: [
            { required: true, message: '请输入负责人', trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '请输入联系电话', trigger: 'blur' },
          ]
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        formInline: {},
        tableData: [],
        departmentList: [],
        majorList: [],
        userList: [],
        selectId: [],
        btnDisabled: true,
        isEdit: false,
        nptDisabled: false
      }
    },
    created() {
      this.getTrainBase(this.pagination.pageSize, this.pagination.pageNo);
      this.$post('/department/findDepartment').then(res => {
        this.departmentList = res.data.data.dataList;
      });
    },
    methods: {
      getTrainBase(pageSize, pageNo) {
        this.$post('/testBase/findTestBase', { ...this.formInline, pageSize, pageNo}).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      },
      search() {
        let form = {
          name: this.formInline.name,
          userName: this.formInline.userName,
          status: this.formInline.status,
          pageSize: this.pagination.pageSize,
          pageNo: 1
        }
        this.$post('/testBase/findTestBase', form ).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      },
      departChange(val) {
        this.$post('/public/findMajorByDepartmentId', {departmentId: val}).then(res => {
          this.form.majorId = []
          this.majorList = res.data.data.map( it => ({ ...it, ID: `${it.ID}`}));
        })
      },
      newAdd() {
        this.form = {
          departmentId: '',
          majorId: [],
          name: '',
          projectName: '',
          ratifyTime: '',
          supportDepartment: '',
          userName: '',
          phone: ''
        },
        this.dialogFormVisible = true;
      },
      edit(val) {
        this.isEdit = true;
        if(val === 'view') {
          this.nptDisabled = true
        } else {
          this.nptDisabled = false
        }
        this.departChange(this.selectId[0].DEPARTMENTID);
        this.form.departmentId = this.selectId[0].DEPARTMENTID;
        this.form.majorId = `${this.selectId[0].MAJORID}`.split(',');
        this.form.name = this.selectId[0].NAME;
        this.form.projectName = this.selectId[0].PORJECTNAME;
        this.form.ratifyTime = this.selectId[0].RATIFYTIME;
        this.form.supportDepartment = this.selectId[0].SUPPORTDEPARTMENT;
        this.form.userName = this.selectId[0].USERNAME;
        this.form.phone = this.selectId[0].PHONE;
        this.form.id = this.selectId[0].ID;
        this.dialogFormVisible = true
      },
      handleSelectionChange(val) {
        this.selectId = val;
        if(val.length === 1) {
          this.btnDisabled = false;
        } else {
          this.btnDisabled = true;
        }
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        this.getTrainBase(size, this.pagination.pageNo);
      },
      handleCurrentChange(page) {
        this.pagination.pageNo = page;
        this.getTrainBase(this.pagination.pageSize, page);
      },
      submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let url = '';
            if(this.isEdit) {
              url = '/testBase/update'
            } else {
              url = '/testBase/add'
            }

            const req = { ...this.form }
            req.majorId = req.majorId.join(',')

            this.$post(url, req).then(res => {
              if(res.data.status === 1){
                this.$message.success('保存成功');
                this.getTrainBase(this.pagination.pageSize, this.pagination.pageNo);
                this.dialogFormVisible = false;
                this.isEdit = false;
              } else{
                this.$message.error(res.data.msg)
              }
            });
          } else {
            return false;
          }
        });
      },
      handleNodeClick(data) {
        console.log(data);
      }
    }
  }
</script>

<style scoped lang="scss">
  .dateStyle{
    /deep/.el-input__inner {
      padding-left: 30px !important;
    }
  }
  /deep/.el-form-item__error {
    top: 32px;
  }
</style>
